<template>
  <div class="wh-full">
    <!-- 项目列表 -->
    <div class="wh-full flex flex-col">
      <div class="search-container">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="关键字" prop="keys">
            <el-input v-model="queryParams.keys" placeholder="关键字" clearable style="width: 200px" @keyup.enter="reload" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="reload">
              <i-ep-search />
              搜索
            </el-button>
            <el-button @click="resetSearchParams">
              <i-ep-refresh />
              重置
            </el-button>
            <slot name="tbar"></slot>
          </el-form-item>
        </el-form>
      </div>
      <div shadow="never" class="table-container flex-1">
        <vxe-grid ref="productGrid" v-if="inited" v-bind="gridOptions">
          <template #status_render="{ row }">
            <el-tag :type="row.status == 'enable' ? 'success' : 'info'">{{ row.status == 'enable' ? '启用' : '禁用' }} </el-tag></template
          >
          <template #pager>
            <!--使用 pager 插槽-->
            <vxe-pager
              :layouts="pagerConfig.layout"
              v-model:current-page="queryParams.page.currentPage"
              v-model:page-size="queryParams.page.pageSize"
              :total="queryParams.page.total"
              @page-change="handlePageChange"
            />
          </template>
          <template v-for="(key, name) in $slots" #[name]="sloatData">
            <template v-if="name.startsWith('column_')">
              <slot :name="name" v-bind="sloatData"></slot>
            </template>
          </template>
        </vxe-grid>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { getProductPage } from '@/api/system/product';
  import { VxeGrid } from 'vxe-table';

  const props = defineProps({ exColumns: Array });

  const inited = ref(true);

  const queryParams = reactive({
    keys: '',
    page: {
      total: 0,
      currentPage: 1,
      pageSize: 10,
    },
  });
  const pagerConfig = reactive({
    layout: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
  });
  const gridOptions = reactive({
    border: true,
    loading: false,
    columnConfig: {
      resizable: true,
    },
    height: 'auto',
    autoResize: true,
    data: [],
    columns: [
      { type: 'seq', width: 60 },
      { type: 'checkbox', width: 50 },
      { field: 'code', title: '编号' },
      { field: 'name', title: '名称' },
      { field: 'packageName', title: '包名目' },
    ].concat(props.exColumns || []),
  });
  const findList = () => {
    gridOptions.loading = true;
    getProductPage(queryParams)
      .then(({ data }) => {
        gridOptions.loading = false;
        gridOptions.data = data.content;
        queryParams.page.total = data.total;
      })
      .catch(() => {
        gridOptions.loading = false;
      });
  };

  const reload = () => {
    queryParams.page.currentPage = 1;
    findList();
  };

  const resetSearchParams = () => {
    queryParams.page.currentPage = 1;
    queryParams.keys = '';
    queryParams.status = 'enable';
  };

  const handlePageChange = ({ currentPage, pageSize }) => {
    queryParams.page.currentPage = currentPage;
    queryParams.page.pageSize = pageSize;
    findList();
  };
  findList();

  const productGrid = ref(VxeGrid);

  defineExpose({ productGrid, findList, reload });
</script>
